<script setup lang="js">
import {h, onMounted, ref} from "vue"
import {ElMessage} from 'element-plus'

const message = ref('Hello Vue3')

onMounted(() => {
  console.log('element-plus mounted')
})

function changeMessage() {
  message.value = 'Hello Element-plus'
}

const open = () => {
  ElMessage('This is a message.')
}

const openVn = () => {
  ElMessage({
    message: h('p', {style: 'line-height: 1; font-size: 14px'}, [
      h('span', null, 'Message can be '),
      h('i', {style: 'color: teal'}, 'VNode'),
    ]),
  })
}
</script>

<template>
  <div class="main-page">
    <el-card>
      <template #header>
        element-plus 展示 {{ message }}
      </template>
      <div class="mb-4">
        <el-button @click="changeMessage">Default</el-button>
        <el-button type="primary" @click="open">Primary</el-button>
        <el-button type="success" @click="openVn">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </div>

      <div class="p3">
        <el-button circle>
          <el-icon>
            <Search/>
          </el-icon>
        </el-button>
        <el-button type="primary" circle>
          <el-icon>
            <Edit/>
          </el-icon>
        </el-button>
        <el-button type="success" circle>
          <el-icon>
            <Check/>
          </el-icon>
        </el-button>
        <el-button type="info" circle>
          <el-icon>
            <Message/>
          </el-icon>
        </el-button>
        <el-button type="warning" circle>
          <el-icon>
            <Star/>
          </el-icon>
        </el-button>
        <el-button type="danger">
          <el-icon class="mr1">
            <Delete/>
          </el-icon>
          删除
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.main-page {
  padding: 20px;
  width: 100%;
  height: 100%;
}
</style>